<template>
  <div class="home-con">
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="dd_item">
          <div><img :src="item.img" /></div>
          <div class="dd_text">
            <div>{{ item.name }}</div>
            <div>{{ item.price }}</div>
          </div>
        </div></el-col
      >
    </el-row>

  <div class="shiwu">
  <div class="dai">待处理事务</div>
  <div class="aaa" >
        <div v-for="(item,index) in daichuliArr" :key='index' class="chuli">
                <div class="chuli1">
                   <div>{{item.name}}</div>
                    <div class="num">{{item.num}}</div>
                </div>
        </div>  
  </div> 
  </div>

  <el-row>
  <el-col :span="12"><div class="grid-content bg-purple">
                            <div class="sp">商品总览</div>
                          <div class="a">
                            <div>
                                <div class="num1">100</div>
                                <div>已下架</div>
                            </div>
                            <div>
                                <div class="num1">400</div>
                                <div>已上架</div>
                            </div>
                            <div>
                                <div class="num1">50</div>
                                <div>库存紧张</div>
                            </div>
                            <div>
                                <div class="num1">500</div>
                                <div>全部商品</div>
                            </div>
                          </div>
                    </div></el-col>
  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                       <div class="sp">用户总览</div>
                          <div class="a">
                            <div>
                                <div class="num1">100</div>
                                <div>今日新增</div>
                            </div>
                            <div>
                                <div class="num1">200</div>
                                <div>昨日新增</div>
                            </div>
                            <div>
                                <div class="num1">1000</div>
                                <div>本月新增</div>
                            </div>
                            <div>
                                <div class="num1">5000</div>
                                <div>会员总数</div>
                            </div>
                          </div>

                    </div>
  </el-col>
  </el-row>

  <div class="zuihou">
    <div class="z1">订单统计</div>
   <div class="z2">
    <div class="z3">
      <div>本月订单统计</div>
      <div>10000</div>
      <div>+10%同比上月</div>
    </div>
    <div class="z3">
      <div>本周订单总数</div>
      <div>1000</div>
      <div>-10%同比上周</div>
    </div>
    <div class="z3">
      <div>本月销售总额</div>
      <div>100000</div>
      <div>+10%同比上月</div>
    </div>
    <div class="z3">
      <div>本周销售总额</div>
      <div>50000</div>
      <div>-10%同比上周</div>
    </div>
  </div>
  </div> 


</div>

  
 
</template>

<script>
export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销售总额",
          price: "5000",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "昨日销售总额",
          price: "3000",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
      daichuliArr: [
        { id: 1, name: "代付款订单", num: "(10)"},
        { id: 2, name: "已完成订单", num: "(5)"},
        { id: 3, name: "待确定收货订单", num: "(20)" },
        { id: 4, name: "代发货订单", num: "(30)" },
        { id: 5, name: "新缺货登记", num: "(8)" },
        { id: 6, name: "待处理退款申请", num:" (8)" },
        { id: 7, name: "已发货订单", num: "(12)" },
        { id: 8, name: "待处理退货订单", num: "(9)" },
        { id: 9, name: "广告即将到期", num: "(10)" },
        ],
    };
  },
};
</script>

<style scoped lang="scss">
.num,.num1{
  color: red;
}
.shiwu{
  border: 1px solid grey;
  margin-top: 20px;
  padding-bottom: 20px;
}
.zuihou{
  margin-top: 20px;
  border: 1px solid grey;
}
.z1{
  background-color: skyblue;
}
.z2{
  width: 200px;
  border-right: 1px solid grey;
}
.z3{
  font-size: 12px;
  margin-bottom: 5px;
}
.grid-content{
  margin-top: 20px;
  width: 500px;
  height: 100px;
  border: 1px solid grey;
}
.sp{
  background-color: skyblue;
}
.a{
  display: flex;
  justify-content: space-around;
  // line-height: 100px;
  align-items: center;
}
.dai{
  
  background-color: skyblue;
}
.aaa{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.chuli{
  width: 30%;
  display: flex;
  
}
.chuli1{
    display: flex;
    border-bottom: 1px solid grey;
    width: 200px;
    justify-content: space-between;
}
// .chuli1 div{
//   margin-right: 50px;
// }
.home-con {
  margin: 10px;
}
.dd_item {
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  padding: 10px;
  border-radius: 5px;
  .dd_text {
    padding-left: 10px;
  }
  img {
    width: 50px;
  }
}
</style>